<template>
  <div class="app-container-inner">
<!--    <a-back-top v-if="typeof this.$route.query.index === 'undefined'" />-->
    <div v-if="typeof this.$route.query.index === 'undefined'" class="inner-header">
      <div class="header__left">
        <a-icon type="arrow-left" class="goBack" @click="goBack" />
      </div>
      <a-menu v-model="activeIndex" mode="horizontal" @select="handleSelect" class="menu">
        <a-menu-item key="1">面板</a-menu-item>
        <a-menu-item key="2">征信报告标注</a-menu-item>
      </a-menu>
<!--      <div class="header__right">-->
<!--        <el-button type="primary" @click="exportPDF">下载pdf</el-button>-->
<!--      </div>-->
    </div>
    <expert-scorecard v-if="activeIndex[0] === '1'" :pie-data="pieData" :suggest="suggest" :bar-data="barData" :high-risk-var="highRiskVar" :report-no="reportNo"/>
    <credit-report-interpretation v-else-if="activeIndex[0] === '2'" :report-no="reportNo" />
  </div>
</template>

<script>
import ExpertScorecard from './components/panel'
import CreditReportInterpretation from './components/credit-report-interpretation'
import { fetchModelResultVarList } from '@/axios/credit-data'
import axios from 'axios'
import store from '@/store'
export default {
  name: 'Iframe',
  components: { ExpertScorecard, CreditReportInterpretation },
  props: {
    viewDetail: {
      type: Function,
      default() {
        return {}
      }
    },
    name: {
      type: String,
      default: ''
    },
    reportNo: {
      type: String,
      default: ''
    },
    reportTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pieData: [],
      barData: [],
      activeIndex: ['1'],
      suggest: '',
      highRiskVar: '',
      index: 0
    }
  },
  created() {
    this.menu()
    // this.getData()
    window.scrollTo(0, 0)
    var index = this.$route.query.index
    this.activeIndex[0] = index === '' || typeof index === 'undefined' || index == null ? '1' : index
  },
  methods: {
    exportPDF() {
      // alert(this.reportNo + this.index)
      for (this.index = 1; this.index < 4; this.index++) {
        // alert(this.index)
        const servers = axios.create({
          baseURL: process.env.VUE_APP_BASE_API,
          // timeout: 9000,
          headers: { 'Content-Type': 'multipart/form-data', 'X-Token': store.getters.token },
          responseType: 'blob',
          params: { reportNo: this.reportNo, index: this.index }
        })
        servers.get(`/file/pdf`).then(res => {
          if (res.status === 200) {
            const blob = new Blob([res.data], { type: 'application/pdf' })
            const fileNames = res.headers['content-disposition']
            const fileName = decodeURI(fileNames.match(/=(.*)$/)[1])
            if ('download' in document.createElement('a')) { // 非IE下载
              const a = document.createElement('a')
              a.style.display = 'none'
              a.href = window.URL.createObjectURL(blob)
              a.download = fileName
              a.click()
              URL.revokeObjectURL(a.href) // 释放URL 对象
            } else { // IE10+
              navigator.msSaveBlob(blob, fileName)
            }
          } else {
            this.$notify({
              message: '下载失败',
              type: 'danger',
              duration: 2000
            })
          }
        }).catch(error => {
          this.$notify.error({
            title: '错误',
            desc: '网络连接错误'
          })
          console.log(error)
        })
      }
    },
    getBreadCrumb() {
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // const first = matched[0]
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      // console.log(matched)
      if (this.levelList[1].name === '征信报告列表') {
        this.levelList[1].name = this.levelList[1].name + '-' + this.name + '(' + this.reportNo + '-' + this.reportTime.replace(/-/g, '') + ')'
      } else {
        this.levelList[1].name = '征信报告列表'
        this.levelList[1].name = this.levelList[1].name + '-' + this.name + '(' + this.reportNo + '-' + this.reportTime.replace(/-/g, '') + ')'
      }
      // console.log(this.levelList)
    },
    menu() {
      window.scrollTo(0, 0)
    },
    handleSelect(e) {
      this.activeIndex[0] = e
    },
    goBack() {
      const row = {
        reportNo: this.reportNo
      }
      this.viewDetail(row)
      this.levelList[1].meta.title = '征信报告'
    },
    getData() {
      const query = {
        reportNo: this.reportNo
      }
      fetchModelResultVarList(query).then((res) => {
        this.pieData.push(res.data.score)
        const s = res.data.totalScore - res.data.score
        this.pieData.push(s)
        this.suggest = res.data.suggest
        this.barData = res.data.items
        // console.log('barData:')
        // console.log(this.barData)
        const highRiskVar = res.data.highRiskVar
        if (typeof highRiskVar !== 'undefined' && highRiskVar != null && highRiskVar.indexOf('占比') !== -1) {
          var reg = new RegExp('；', 'g')
          const data = highRiskVar.replace(reg, '').split('\n')
          const share = data[data.length - 1].split(':')[1]
          data.pop()
          data[1] = data[1] + ' (' + share + ')'
          this.highRiskVar = data.join('\n')
        } else {
          this.highRiskVar = highRiskVar
        }
      }).catch()
    }
  }
}
</script>

<style lang="less" scoped>
  .app-container-inner {
    overflow: hidden;
  }
  .inner-header {
    position: relative;
    background: white;
    .menu {
      position: relative;
      left: 57px;
    }
  }
  .header__left {
    display: flex;
    position: absolute;
    cursor: pointer;
    height: 48px;
    width: 57px;
    line-height: 48px;
    border-bottom: solid 1px #e6e6e6;
    .goBack {
      z-index: 99;
      font-size: 28px;
      margin-left: 8px;
      align-self: center;
    }
  }
  .header__right {
    position: absolute;
    cursor: pointer;
    top: 25%;
    right: 1%;
  }
</style>
